<template>
  <div class="person-info">
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="person-info-form">
        <div class="person-info-form-item">
          <span>姓名</span>
          <input type="text" readonly :value="userInfo.employee_name">
        </div>

        <div class="person-info-form-item" v-if="userInfo.phone">
          <span>联系电话</span>
          <input type="text" readonly :value="userInfo.phone">
        </div>

        <div class="person-info-form-item" v-if="userInfo.phone">
          <span>生日</span>
          <datetime
            style="display: flex;flex-direction: row-reverse;"
            v-model="birthday"
            title="修改"
            :min-year="1000"
            format="YYYY-MM-DD"
            class="person-info-data"
            @on-confirm="onConfirm"></datetime>
          <!--          <input type="text" readonly :value="birthday">-->
        </div>

        <div class="person-info-form-item" v-if="email">
          <span>电子邮箱</span>
          <input type="text" readonly :value="email">
        </div>

     <!--   <div class="person-info-form-item">
          <span>额度密码</span>
          <div class="person-info-form-item-quota">
            <template v-if="quotaPass">
              <span>******</span>
              <span class="person-info-form-item-quota-btn" @click="onQuotaPassword">更改</span>
            </template>

            <template v-else>
              <span>未设置</span>
              <span class="person-info-form-item-quota-btn" @click="onQuotaPassword">设置</span>
            </template>
          </div>
        </div>-->

        <!-- <div class="person-info-form-item">
           <span>旧密码</span>
           <input type="password" placeholder="请输入旧密码" v-model="form.pass_source">
         </div>-->

      </div>
    </div>

    <!--设置密码弹框-->
<!--    <modify-quota-pass
      v-model="dialogVisibleQuotaPass"
      v-if="dialogVisibleQuotaPass"
      :isQuotaPass="quotaPass"
      :setQuotaPass="setQuotaPass"
      :phone="phone"
    ></modify-quota-pass>-->
  </div>
</template>

<script>
  import Me from '@/dll/me'
  // import modifyQuotaPass from '../../../components/modifyQuotaPass'

  export default {
    name: 'index.vue',
    // components: {
    //   modifyQuotaPass
    // },
    data () {
      return {
        xheader: {
          title: '个人信息'
        },

        userInfo: {}, // 用户信息
        quotaAmount: '0', // 总额度
        email: '', // 电子邮箱

        isModifyBirthday: false, // 是否修改生日
        birthday: '', // 修改生日

        quotaPass: undefined, // 是否设置了额度密码
        dialogVisibleQuotaPass: false, // 修改额度密码

        phone: ''
      }
    },
    created () {
      // this.userInfo = this.globalData.userInfo
      this.getPersonInfo()
    },
    methods: {
      // 获取个人信息
      async getPersonInfo () {
        this.$vux.loading.show()
        let res = await Me.getPersonInfo()
        this.$vux.loading.hide()
        if (res.code == 0) {
          let { data } = res
          this.userInfo = data.extra
          this.quotaAmount = data.quota_amount
          this.email = data.email
          this.birthday = data.birthday || '未填写'
          this.quotaPass = parseFloat(data.quota_pass)
          this.phone = data.phone
        }
      },

      // 修改生日
      async onConfirm () {
        let res = await Me.changeBirthday({ birthday: this.birthday })
        if (res.code == 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '修改成功'
          })
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      }

      // 修改额度密码
      // onQuotaPassword () {
      //   if (this.phone) {
      //     this.dialogVisibleQuotaPass = true
      //   } else {
      //     let msg
      //     if (this.quotaPass) {
      //       msg = '当前用户未绑定手机号 暂时不能修改密码'
      //     } else {
      //       msg = '当前用户未绑定手机号 暂时不能设置密码'
      //     }
      //     this.$vux.alert.show({
      //       title: '提示',
      //       content: msg
      //     })
      //     this.dialogVisibleQuotaPass = false
      //   }
      // }

      // setQuotaPass () {
      //   this.quotaPass = 1
      // }
    }
  }
</script>

<style lang="less">
  * {
    box-sizing: border-box;
  }

  .person-info {
    /*background: #fff;*/
    padding: 20px 12px;
    margin-top: 2px;
    font-size: 15px;

    .person-info-form-item {
      display: flex;
      margin: 15px 0;
      align-items: center;
      min-height: 40px;
    }

    .person-info-form-item-quota {
      padding: 0 10px;

      .person-info-form-item-quota-btn {
        color: #b0290f;
        padding-left: 30px;
      }
    }

    .person-info-form-user {
      border-bottom: 1px solid #e6e6e6;

      span, input {
        color: rgba(0, 0, 0, 0.35);
      }

      input {
        border: none;
      }

      input:focus {
        border: none;
      }
    }

    span {
      width: 70px;
      color: #000;
    }

    input {
      border-bottom: 1px solid #e6e6e6;
      padding: 0 10px;
      height: 40px;
      background: none;
      flex: 1;
      outline: none;
      font-size: 15px;
    }

    .person-info-data {
      .vux-cell-primary {
        margin: 0 30px 0 10px;
      }

      & > div {
        & > p {
          color: #b0290f;
        }
      }
    }
  }
</style>
